<template>
	<view class="chatbox">
		<comtarbar class="comtarbar">
			<template #center>
				<view class="title">
					<view>{{ getName }}</view>
					<view v-if="type == 'group' && getGroupInfo.user_list">（ {{ getGroupInfo.user_list.length }} ）</view>
				</view>
			</template>
			<template #right>
				<view v-if="type == 'group'" class="info" @tap="goGroupInfo"><image src="../../static/images/userhome/more.png" mode="widthFix"></image></view>
			</template>
		</comtarbar>
		<view class="messagebox" :animation="animationData" :style="{ height: scrollHeight + 'px' }">
			<my-progress v-if="record" :duration="maxDuration"></my-progress>
			<view class="new_message" v-if="getNewMsgCount > 0 && !isBottom" @tap="goBottom">
				<view>
					<image src="../../static/images/chat/newMessage3.png" mode="widthFix"></image>
					<view class="number">{{ getNewMsgCount }}</view>
				</view>
			</view>
			<scroll-view scroll-y="true" @scroll="scrollHandler" class="scroll-Y" show-scrollbar="true" :scroll-top="contentHeight">
				<!-- 私聊 -->
				<view class="contentbox" v-if="type == 'private' && getChatHistory.toUser">
					<view class="loadbox" v-if="getIsLoading"><image src="../../static/images/chat/loading.gif" mode="widthFix"></image></view>
					<view class="morebtn" v-if="!getIsLoading && getChatCount > chat_limit" @tap="loadMore">点击加载更多</view>
					<template v-for="(item, index) in getChatHistory.msg_list">
						<view class="othermsg" v-if="item.belong != getUser._id" :key="index">
							<view class="o_imgbox" @tap="goInfo(getChatHistory.toUser._id)">
								<image :src="getChatHistory.toUser.avatars ? getChatHistory.toUser.avatars : ''" mode="aspectFill"></image>
							</view>
							<rich-text class="o_msgbox" v-if="item.type == 'text'" :nodes="item.message"></rich-text>
							<view class="o_msgbox o_msgimg" v-else-if="item.type == 'image'">
								<view><image @load="loadImg" lazy-load class="chat_img" @tap="previewImage" :data-img="item.img" :src="item.message" mode="widthFix"></image></view>
							</view>
							<view
								class="o_msgbox o_sound"
								:id="'sound' + index"
								@tap="palySound(item, 'sound' + index)"
								:style="{ width: (item.duration / maxDuration) * 360 + 'rpx' }"
								v-else-if="item.type == 'voice'"
							>
								<view class="sound_box"><image :src="soundId == 'sound' + index ? playingImg : playImg" mode="widthFix"></image></view>
								<view class="sound_time">{{ item.duration }} s</view>
							</view>
							<!-- 位置信息 -->
							<view class="o_msgbox  o_location" v-else-if="item.type == 'location'">
								<view class="ol_name">{{ item.message.address }}</view>
								<map
									style="width: 50vw; height:260rpx;"
									:latitude="item.message.latitude"
									:longitude="item.message.longitude"
									:markers="[{ latitude: item.message.latitude, longitude: item.message.longitude, iconPath: '../../static/images/chat/location.png' }]"
								></map>
								<view class="o_mask" @tap="openLocation(item.message)"></view>
							</view>
						</view>
						<view class="mymsg" v-else :key="index">
							<view class="m_imgbox" @tap="goInfo(getChatHistory.fromUser._id)">
								<image lazy-load :src="getChatHistory.fromUser.avatars ? getChatHistory.fromUser.avatars : ''" mode="aspectFill"></image>
							</view>
							<!-- 文字信息 -->
							<rich-text class="m_msgbox" v-if="item.type == 'text'" :nodes="item.message"></rich-text>
							<!-- 图片信息 -->
							<view class="m_msgbox m_msgimg" v-else-if="item.type == 'image'">
								<view><image @load="loadImg" class="chat_img" lazy-load @tap="previewImage" :data-img="item.img" :src="item.message" mode="widthFix"></image></view>
							</view>
							<!-- 语音信息 -->
							<view
								class="m_msgbox m_sound"
								:id="'sound' + index"
								@tap="palySound(item, 'sound' + index)"
								:style="{ width: (item.duration / maxDuration) * 360 + 'rpx' }"
								v-else-if="item.type == 'voice'"
							>
								<view class="sound_box"><image :src="soundId == 'sound' + index ? playingImg : playImg" mode="widthFix"></image></view>
								<view class="sound_time">{{ item.duration }} s</view>
							</view>
							<!-- 位置信息 -->
							<view class="m_msgbox  m_location" v-else-if="item.type == 'location'">
								<view class="ml_name">{{ item.message.address }}</view>
								<map
									style="width: 50vw; height:260rpx;"
									:latitude="item.message.latitude"
									:longitude="item.message.longitude"
									:markers="[{ latitude: item.message.latitude, longitude: item.message.longitude, iconPath: '../../static/images/chat/location.png' }]"
								></map>
								<view class="m_mask" @tap="openLocation(item.message)"></view>
							</view>
						</view>
						<view class="time" v-if="item.date != ''">{{ item.date | dateFormat }}</view>
					</template>
				</view>

				<!-- 群聊 -->
				<view class="contentbox" v-if="type == 'group' && getChatHistory.groupID">
					<view class="loadbox" v-if="getIsLoading"><image src="../../static/images/chat/loading.gif" mode="widthFix"></image></view>
					<view class="morebtn" v-if="!getIsLoading && getChatCount > chat_limit" @tap="loadMore">点击加载更多</view>
					<template v-for="(item, index) in getChatHistory.msg_list">
						<view class="othermsg" v-if="item.belong != getUser._id" :key="index">
							<view class="o_imgbox" @tap="goInfo(item.belong)"><image :src="item.user.avatars" mode="aspectFill"></image></view>
							<view class="msgbox">
								<view class="o_name">{{ item.user.name }}</view>
								<rich-text class="o_msgbox og_msgbox" v-if="item.type == 'text'" :nodes="item.message"></rich-text>
								<view class="o_msgbox og_msgbox o_msgimg" v-else-if="item.type == 'image'">
									<view>
										<image @load="loadImg" lazy-load class="chat_img" @tap="previewImage" :data-img="item.img" :src="item.message" mode="widthFix"></image>
									</view>
								</view>
								<view
									class="o_msgbox og_msgbox o_sound"
									:id="'sound' + index"
									@tap="palySound(item, 'sound' + index)"
									:style="{ width: (item.duration / maxDuration) * 360 + 'rpx' }"
									v-else-if="item.type == 'voice'"
								>
									<view class="sound_box"><image :src="soundId == 'sound' + index ? playingImg : playImg" mode="widthFix"></image></view>
									<view class="sound_time">{{ item.duration }} s</view>
								</view>
								<!-- 位置信息 -->
								<view class="o_msgbox og_msgbox  o_location" v-else-if="item.type == 'location'">
									<view class="ol_name">{{ item.message.address }}</view>
									<map
										style="width: 50vw; height:260rpx;"
										:latitude="item.message.latitude"
										:longitude="item.message.longitude"
										:markers="[{ latitude: item.message.latitude, longitude: item.message.longitude, iconPath: '../../static/images/chat/location.png' }]"
									></map>
									<view class="o_mask" @tap="openLocation(item.message)"></view>
								</view>
							</view>
						</view>
						<view class="mymsg" v-else :key="index">
							<view class="m_imgbox" @tap="goInfo(item.belong)"><image lazy-load :src="item.user.avatars" mode="aspectFill"></image></view>
							<view class="msgbox">
								<!-- <view class="m_name">{{ item.user.name }}</view> -->
								<rich-text class="m_msgbox mg_msgbox" v-if="item.type == 'text'" :nodes="item.message"></rich-text>
								<view class="m_msgbox m_msgimg mg_msgbox" v-else-if="item.type == 'image'">
									<view>
										<image @load="loadImg" class="chat_img" lazy-load @tap="previewImage" :data-img="item.img" :src="item.message" mode="widthFix"></image>
									</view>
								</view>
								<view
									class="m_msgbox m_sound mg_msgbox"
									:id="'sound' + index"
									@tap="palySound(item, 'sound' + index)"
									:style="{ width: (item.duration / maxDuration) * 360 + 'rpx' }"
									v-else-if="item.type == 'voice'"
								>
									<view class="sound_box"><image :src="soundId == 'sound' + index ? playingImg : playImg" mode="widthFix"></image></view>
									<view class="sound_time">{{ item.duration }} s</view>
								</view>
								<!-- 位置信息 -->
								<view class="m_msgbox  m_location mg_msgbox" v-else-if="item.type == 'location'">
									<view class="ml_name">{{ item.message.address }}</view>
									<map
										style="width: 50vw; height:260rpx;"
										:latitude="item.message.latitude"
										:longitude="item.message.longitude"
										:markers="[{ latitude: item.message.latitude, longitude: item.message.longitude, iconPath: '../../static/images/chat/location.png' }]"
									></map>
									<view class="m_mask" @tap="openLocation(item.message)"></view>
								</view>
							</view>
						</view>
						<view class="time" v-if="item.date != ''">{{ item.date | dateFormat }}</view>
					</template>
				</view>
			</scroll-view>
		</view>
		<submit @measure="measure" :chatType="type" :maxDuration="maxDuration" :id="id" class="submit" @record="recording"></submit>
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
import request from '../../api/request.js';
import datas from '../../commons/js/datas.js';
import submit from '../../components/submit/submit.vue';
import MyProgress from '../../components/myprogress/myprogress.vue';
const innerAudioContext = uni.createInnerAudioContext();
export default {
	data() {
		return {
			id: '', //当前用户获取群聊的id
			type: '', //当前聊天的类型（群聊还是私聊）
			scrHeight: 0, //屏幕高度
			panelHeight: 0, //submit组件的高度
			ctbHeight: 0, // comtarbar组件的高度
			contentHeight: 0, //聊天区域的高度
			scrollHeight: 0, //滚动区域的视口高度
			animationData: {}, //聊天窗口的动画
			imgList: [], //图片预览数组
			Timer: null, //监听image加载时防抖函数使用的timer
			reTimer: null, //监听updated时防抖函数使用的timer
			chats: null, //真机测试时的聊天记录
			playImg: '/static/images/chat/audio2.png', //展示音频的img
			playingImg: '', //播放音频的是img
			soundId: '', //点击播放的音频id
			palyTimer: null, //监听录音播放结束的timer
			interval: null, //播放录音动画的interval
			record: false, //录音动画的显示与隐藏
			startTime: 0, //记录聊天的时间
			chat_page: 1, //聊天记录的页码
			chat_limit: 40, //每页展示的聊天记录的条数
			isBottom: true, //滚动条是否滚动到底部，默认是在底部，通过这个属性来控制滚动条是否自动滚动到底部
			maxDuration: 20 //最大录音长度
		};
	},
	onLoad(option) {
		// this.chats = datas.chats;
		this.id = option.id;
		this.type = option.type;
		if (this.type == 'group') {
			this.$store.dispatch('getInfo', this.id);
		}
		this.$store.commit('changeChatType', this.type);
		this.$store.commit('changeChatId', this.id);
		this.$store.dispatch('getChatHistory', { id: this.id, type: this.type, page: this.chat_page, limit: this.chat_limit });
	},
	mounted() {
		this.getHeight();
	},
	updated() {
		this.$nextTick(() => {
			if (this.contentHeight < this.scrHeight) {
				this.upDateDialog();
			} else if (this.getNewMsgCount > 0 && this.isBottom) {
				this.upDateDialog();
			}
		});
	},
	beforeDestroy() {
		// 关闭页面后，语音停止播放
		innerAudioContext.stop();
	},
	computed: {
		...mapGetters(['getChatHistory', 'getChatCount', 'getName', 'getUser', 'getGroupInfo', 'getIsLoading', 'getNewMsgCount'])
	},
	components: {
		submit,
		MyProgress
	},
	watch: {
		// 监听聊天信息
		getChatHistory: {
			deep: true, //深度监听设置为 true
			handler(val, oldVal) {
				this.loadImg();
				this.imgList = [];
				this.$nextTick(() => {
					val.msg_list.map(item => {
						if (item.type == 'image') {
							//图片
							this.imgList.push(item.img);
						}
					});
				});
			}
		}
		// chats: function(val, oldVal) {
		// 	this.getHeight();
		// 	this.loadImg();
		// 	this.$nextTick(function() {
		// 		this.imgDom();
		// 	});
		// }
	},
	methods: {
		// 去用户详情页
		goInfo(id) {
			uni.navigateTo({
				url: '../information/information?id=' + id
			});
		},
		// 接收子组件submit传递过来的高度
		measure(height) {
			this.panelHeight = height;
			this.show();
		},
		// 窗口动画
		show() {
			var animation = uni.createAnimation({
				duration: 200,
				timingFunction: 'ease'
			});
			if (this.ctbHeight == 0) {
				//
				this.getHeight(); // 获取高度
				setTimeout(() => {
					// #ifdef APP-PLUS
					this.scrollHeight = this.scrHeight - this.ctbHeight - this.panelHeight - 28;
					// #endif
					// #ifdef H5
					this.scrollHeight = this.scrHeight - this.ctbHeight - this.panelHeight;
					// #endif
					animation.height(this.scrollHeight).step();
					this.animationData = animation.export();
					// 因为在执行动画时，contentHeight的值是没有变的，所以页面不会更新，需要手动改变一下contentHeight的值
					this.contentHeight = this.contentHeight - 3;
					setTimeout(() => {
						this.contentHeight = this.contentHeight + 3;
					}, 200);
				});
			} else {
				// #ifdef APP-PLUS
				this.scrollHeight = this.scrHeight - this.ctbHeight - this.panelHeight - 28;
				// #endif
				// #ifdef H5
				this.scrollHeight = this.scrHeight - this.ctbHeight - this.panelHeight;
				// #endif

				animation.height(this.scrollHeight).step();
				this.animationData = animation.export();
				// 因为在执行动画时，contentHeight的值是没有变的，所以页面不会更新，需要手动改变一下contentHeight的值
				this.contentHeight = this.contentHeight - 3;
				setTimeout(() => {
					this.contentHeight = this.contentHeight + 3;
				}, 200);
			}
		},
		// 监听滚动条的滚动
		scrollHandler(event) {
			let scroll = event.detail.scrollHeight - this.scrollHeight;
			if (event.detail.scrollTop < scroll - 80) {
				this.isBottom = false;
			} else {
				this.isBottom = true;
				if (this.getNewMsgCount > 0) {
					this.upDateDialog();
				}
			}
		},
		//获取元素的高度
		getHeight: function() {
			const query = uni.createSelectorQuery().in(this);
			// #ifdef APP-PLUS
			uni.getSystemInfo({
				success: res => {
					this.scrHeight = res.windowHeight;
					query
						.select('.comtarbar')
						.boundingClientRect(data => {
							this.ctbHeight = data.height;
							//聊天窗口的高度
							// this.scrollHeight = this.scrHeight - this.ctbHeight - this.panelHeight - 1200;
							this.scrollHeight = this.scrHeight - this.ctbHeight - this.panelHeight;
							// console.log('屏幕高度：', this.scrHeight);
							// console.log('tarbar高度：', this.ctbHeight);
							// console.log('submit高度：', this.panelHeight);
							// console.log('聊天窗口的高度：', this.scrollHeight);
							this.getContent();
						})
						.exec();
				}
			});
			// #endif

			// #ifdef H5
			setTimeout(() => {
				// 屏幕高度
				query
					.select('.chatbox')
					.boundingClientRect(data => {
						this.scrHeight = data.height;
					})
					.exec();
				// tarbar
				query
					.select('.comtarbar')
					.boundingClientRect(data => {
						this.ctbHeight = data.height;
					})
					.exec();
				// submit组件
				query
					.select('.submit')
					.boundingClientRect(data => {
						this.panelHeight = data.height;
					})
					.exec();
				//聊天窗口的高度
				this.scrollHeight = this.scrHeight - this.ctbHeight - this.panelHeight - 2;
			}, 400);
			// #endif
		},

		// 获取聊天区域的高度
		getContent() {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('.contentbox')
				.boundingClientRect(data => {
					if (data) {
						this.contentHeight = data.height;
					}
				})
				.exec();
		},

		// 监听图片是否加载完成
		loadImg() {
			// 防抖
			// clearTimeout(this.Timer);
			// this.Timer = setTimeout(() => {
			// 	this.getContent();
			// }, 60);
			if (this.isBottom) {
				// 防抖
				clearTimeout(this.Timer);
				this.Timer = setTimeout(() => {
					this.getContent();
				}, 300);
			}
		},

		// 预览图片
		previewImage(e) {
			// 遍历找到当前img在imgList中的index值
			let index = this.imgList.findIndex(item => {
				return item == e.target.dataset.img;
			});
			uni.previewImage({
				urls: this.imgList,
				current: index,
				longPressActions: {
					itemList: ['发送给朋友', '保存图片', '收藏'],
					success: function(data) {
						// console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
					},
					fail: function(err) {
						// console.log(err.errMsg);
					}
				}
			});
		},

		

		// 播放录音
		palySound(item, id) {
			clearInterval(this.interval);
			clearTimeout(this.palyTimer);
			let { message, duration } = item;
			console.log(message)
			if (message == '过期已删除') {
				uni.showToast({
					title:"录音已过期",
					icon:"none",
					duration:1000
				})
			} else {
				let index = 0;
				if (this.soundId == id) {
					innerAudioContext.stop();
					innerAudioContext.src = '';
					this.soundId = '';
					this.playingImg = '';
					index = 0;
				} else {
					this.soundId = id;
					innerAudioContext.src = message;
					innerAudioContext.play();
					this.interval = setInterval(() => {
						index++;
						this.playingImg = '/static/images/chat/audio' + (index % 3) + '.png';
					}, 400);
					this.palyTimer = setTimeout(() => {
						clearInterval(this.interval);
						clearTimeout(this.palyTimer);
						this.playingImg = '';
						this.soundId = '';
						index = 0;
					}, duration * 1000 + 100);
				}
			}
		},

		// 录音动画
		recording(value) {
			this.record = value;
		},

		// 转到群组详情页
		goGroupInfo() {
			uni.navigateTo({
				url: '../groupinfo/groupinfo?id=' + this.id
			});
		},
		// 打开位置信息
		openLocation(location) {
			uni.openLocation({
				latitude: location.latitude,
				longitude: location.longitude,
				success: function() {
					// console.log('success');
				}
			});
		},
		// 加载更多
		loadMore() {
			this.$store.commit('changeIsLoading');
			this.chat_page++;
			this.$store.dispatch('getChatHistory', { id: this.id, type: this.type, page: this.chat_page, limit: this.chat_limit });
		},
		// 滚动到底部
		goBottom() {
			// let scroll = this.contentHeight;
			// console.log(scroll)
			// this.contentHeight = this.contentHeight - 3;
			// console.log(this.contentHeight)
			// setTimeout(() => {
			// 	this.contentHeight = scroll;
			// 	console.log(this.contentHeight)

			// }, 0);
			this.isBottom = true;
			this.loadImg();
		},
		upDateDialog() {
			this.$nextTick(async () => {
				// 更新未读信息的数量
				let res = await request({
					url: '/dialogue/updateUnRead',
					data: {
						token: uni.getStorageSync('token'),
						id: this.id
					},
					method: 'POST'
				});
				this.$store.dispatch('getDialogue');
			});
		}
	}
};
</script>

<style lang="scss" scoped>
@import '../../commons/css/mycss.scss';
.chatbox {
	box-sizing: border-box;
	padding-top: var(--status-bar-height);
	background: white;
	height: 100vh;
	overflow: hidden;
	position: relative;
	.comtarbar {
		background: #f4f4f4;
		.info {
			margin-left: 30rpx;
		}
	}
	.loadbox {
		padding-top: 10rpx;
		height: 80rpx;
		width: 100vw;
		display: flex;
		justify-content: center;
		align-items: center;
		image {
			opacity: 0.6;
			width: 60rpx;
			height: 60rpx;
		}
	}
	.morebtn {
		padding-top: 10rpx;
		height: 80rpx;
		width: 100vw;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
		color: #ccc;
	}

	.messagebox {
		margin-top: 88rpx;
		background: white;
		position: relative;
		box-sizing: border-box;
		padding-bottom: 10rpx;
		.new_message {
			position: absolute;
			width: 110rpx;
			height: 110rpx;
			bottom: 20rpx;
			right: 20rpx;
			z-index: 888;
			display: flex;
			align-items: center;
			justify-content: center;
			image {
				width: 110rpx;
				height: 100%;
			}
			view {
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;
				.number {
					position: absolute;
					padding: 0rpx 10rpx;
					border-radius: 4rpx;
					background: #ffffff;
					top: 50%;
					left: 50%;
					color: #1196d3;
					transform: translate(-50%, -50%);
					font-size: 26rpx;
				}
			}
		}
		.scroll-Y {
			height: 100%;

			.othermsg {
				width: 100%;
				padding: 0 20rpx;
				padding-top: 20rpx;
				padding-bottom: 10rpx;
				float: left;

				view {
					float: left;
				}
				.msgbox {
					max-width: 60%;
					position: relative;
				}
				.o_imgbox {
					width: 80rpx;
					height: 80rpx;
					overflow: hidden;
					border-radius: 10rpx;
					image {
						height: 100%;
						width: 100%;
					}
				}
				.o_name {
					display: inline-block;
					padding-left: 40rpx;
					height: 40rpx;
					width: 80%;
					font-size: 30rpx;
					line-height: 60rpx;
					color: rgba(25, 29, 35, 0.5);
					position: absolute;
					top: -20rpx;
					left: 0rpx;
				}
				.o_msgbox {
					float: left;
					margin-left: 40rpx;
					border-radius: 10rpx;
					padding: 16rpx 10rpx;
					max-width: 60%;
					background: #eeeeee;
					font-size: 28rpx;
					min-height: 40rpx;
					line-height: 40rpx;
					position: relative;
					div {
						display: inline-block !important;
					}
					image {
						display: inline-block !important;
					}
				}
				.og_msgbox {
					margin-top: 40rpx;
					max-width: 100%;
				}
				/* 箭头 */
				.o_msgbox:after {
					content: '';
					width: 0;
					height: 0;
					position: absolute;
					left: -14rpx;
					top: 12px;
					border-top: solid 16rpx transparent;
					border-right: solid 16rpx #eeeeee;
					border-bottom: solid 16rpx transparent;
				}
				.o_msgimg {
					min-height: 70rpx;
					padding: 10rpx !important;
					view {
						width: 300rpx;
						max-height: 400rpx;
						overflow: hidden;
						display: flex;
						justify-content: center;
						align-items: center;
						image {
							width: 300rpx;
							height: auto;
						}
					}
				}
				.o_sound {
					min-width: 90rpx;
					font-size: 26rpx;
					// width: 260rpx;
					height: 60rpx;
					display: flex;
					// flex-direction: row-reverse;
					.sound_box {
						display: flex;
						align-items: center;
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
					.sound_time {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						padding-left: 10rpx;
					}
				}
				.o_location {
					z-index: 20;
					height: 310rpx;
					width: 50vw;
					position: relative;
					.ol_name {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					map {
						position: absolute;
						top: 64rpx;
						left: 10rpx;
						display: inline-block;
					}
					.o_mask {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						// background: rgba(0,0,0,.2);
					}
				}
			}
			.mymsg {
				width: 100%;
				padding: 0 20rpx;
				padding-top: 20rpx;
				padding-bottom: 10rpx;
				float: right;
				view {
					float: right;
				}
				.msgbox {
					max-width: 60%;
					position: relative;
				}
				.m_imgbox {
					width: 80rpx;
					height: 80rpx;
					overflow: hidden;
					border-radius: 10rpx;
					image {
						height: 100%;
						width: 100%;
					}
				}
				.m_name {
					position: absolute;
					display: inline-block;
					font-size: 30rpx;
					width: 100%;
					color: rgba(25, 29, 35, 0.5);
					padding-right: 40rpx;
					right: 0rpx;
					text-align: right;
					top: -6rpx;
				}
				.m_msgbox {
					float: right;
					margin-right: 40rpx;
					border-radius: 10rpx;
					padding: 16rpx 10rpx;
					max-width: 60%;
					background: #9eea6a;
					font-size: 30rpx;
					min-height: 40rpx;
					line-height: 40rpx;
					position: relative;
				}
				.mg_msgbox {
					max-width: 100%;
				}
				/* 箭头 */
				.m_msgbox:after {
					content: '';
					width: 0;
					height: 0;
					position: absolute;
					right: -14rpx;
					top: 12px;
					border-top: solid 16rpx transparent;
					border-left: solid 16rpx #9eea6a; /* 黑色大三角形 */
					border-bottom: solid 16rpx transparent;
				}
				.m_msgimg {
					min-height: 70rpx;
					padding: 10rpx !important;
					view {
						width: 300rpx;
						max-height: 400rpx;
						overflow: hidden;
						display: flex;
						justify-content: center;
						align-items: center;
						image {
							width: 300rpx;
							height: auto;
						}
					}
				}
				.m_sound {
					min-width: 90rpx;
					font-size: 26rpx;
					// width: 260rpx;
					height: 60rpx;
					display: flex;
					flex-direction: row-reverse;
					.sound_box {
						display: flex;
						align-items: center;
						transform: rotate(180deg);
						image {
							width: 40rpx;
							height: 40rpx;
						}
					}
					.sound_time {
						display: flex;
						align-items: center;
						justify-content: flex-end;
						padding-right: 10rpx;
					}
				}
				.m_location {
					height: 310rpx;
					width: 50vw;
					position: relative;
					z-index: 20;
					.ml_name {
						width: 100%;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
					map {
						position: absolute;
						top: 64rpx;
						left: 10rpx;
						display: inline-block;
					}
					.m_mask {
						position: absolute;
						top: 0;
						left: 0;
						right: 0;
						bottom: 0;
						// background: rgba(0,0,0,.2);
					}
				}
			}
		}
	}
}
.time {
	width: 100vw;
	text-align: center;
	font-size: 24rpx;
	line-height: 60rpx;
	color: rgba(25, 29, 35, 0.5);
}
.contentbox {
	display: inline-block;
	width: 100vw;
	padding-bottom: 20rpx;
	box-sizing: border-box;
}

/deep/ rich-text {
	div {
		display: inline-block !important;
		vertical-align: bottom;
	}
	img {
		display: inline-block !important;
		vertical-align: bottom;
	}
}
</style>
